<template>
	<view class="content">
		<block v-if="info.status == 6">
			<view class="refund-state-bar">
				<view class="refund-state-bar__tit">提交申请成功，等待审核中</view>
			</view>
		</block>
		<block v-if="info.status == 4">
			<view class="refund-state-bar">				
				<view class="refund-state-bar__txt">退款成功</view>
			</view>
		</block>
		
		<!-- 退款成功 -->
		<view class="refund-info-group">
			<view class="refund-info-group__item">
				<view class="refund-info-group__item__hd">退款金额</view>
				<view class="refund-info-group__item__bd">&yen;{{(info.sell_price * info.num).toFixed(2)}}</view>
			</view>
			<view class="refund-info-group__item">
				<view class="refund-info-group__item__hd">退款时间</view>
				<view class="refund-info-group__item__bd">{{get_date_format(info.refund_time)}}</view>
			</view>
			<view class="refund-info-group__item">
				<view class="refund-info-group__item__hd">退款信息</view>
				<view class="refund-info-group__item__bd">{{info.refund_description}}</view>
			</view>			
		</view>
	</view>
</template>

<script>
	import {apiUrl} from '@/api/base.js'
	import {
		get_date_format
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				order_sn: '',				
				info: {}
			}
		},
		onLoad(options) {
			if (options.order_sn) {
				this.order_sn = options.order_sn;				
				this.getRefundInfo();
			} else {
				uni.showToast({
					title: '提交参数有误',
					icon: 'none'
				})
			}
		},
		methods: {
			// 退款详情
			getRefundInfo() {
				uni.request({
					url: apiUrl + "addons/car/order/getOrder",
					data: {
						order_sn:this.order_sn
					},
					method: "GET",
					success: (res) => {
						this.info=res.data.data
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			// 获取日期
			get_date_format(time) {
				return get_date_format(time,"yyyy年MM月dd号 hh:mm:ss");
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
	}

	.refund-state-bar {
		padding: 48rpx 24rpx;
		background: linear-gradient(to bottom right, #5fce7e, #09c3c1);

		&__tit {
			color: #fff;
			font-size: 36rpx;
		}

		&__txt {
			color: #fff;
			margin-top: 24rpx;
			font-size: $uni-font-size-sm;
		}
	}

	.refund-info-group {
		padding: 0 24rpx;

		&__item {
			display: -webkit-box;
			padding: 24rpx 0;
			font-size: $uni-font-size-base;
			border-bottom: 2rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			&__hd {
				width: 160rpx;
			}

			&__bd {
				-webkit-box-flex: 1
			}
		}
	}

	.check-voucher-btn {
		width: 138rpx;
		height: 48rpx;
		margin: 0;
		padding: 0;
		line-height: 48rpx;
		text-align: center;
		color: $uni-text-color-primary;
		background-color: $uni-bg-color;
		font-size: $uni-font-size-base;
		border: 1rpx solid $uni-color-primary !important;
		border-radius: 8rpx;
	}
</style>
